import Flex from "@/components/flex";
import Typography from "@/components/typography";
import { Button, DotLoading, ErrorBlock } from "@/components/base";
import { useNavigate } from "react-router-dom";
import { Controller } from "@/views/basic-layout/controller";
import * as hooks from '../../hooks';
import { PageController } from '../../page-controller';
import React from "react";
import * as pages from '@/pages'
import { toCurrency } from "@/utils/funs";
import dayjs from "dayjs";
import { useObserver } from "mobx-react-lite";

const { Text } = Typography;

/**
 * 会员卡列表
 */
export function MembershipCardList() {
    const navigate = useNavigate();
    const pageController = React.useContext(PageController.Context);
    const controller = React.useContext(Controller.Context);
    const { id } = hooks.useSearch();
    const loading = useObserver(() => pageController.loading);
    const cards = useObserver(() => pageController.customerStoredValueCards?.cards || []);

    return (
        <>
            {/* 会员卡剩余金额 */}
            <Flex justify="space-between" align="center" style={{ marginBottom: '8px' }}>
                <Text size={14} strong style={{ display: 'block' }}>
                    会员卡剩余金额
                </Text>
                <Button size="small" onClick={() => {
                    controller.removeTab(pages.customerStoredValueForm.name);
                    navigate(`/${pages.customerStoredValueForm.name}?customerId=${id}`);
                }}>
                    充值
                </Button>
            </Flex>
            {loading > 0 && <Flex justify="center" align="center" style={{ padding: 16 }}><DotLoading /></Flex>}
            {cards.length === 0 && <ErrorBlock status='empty' description='' title='暂无数据' />}
            {
                cards.map((item) => {
                    return (
                        <div key={item.id} style={{
                            border: '1px solid #f0f0f0',
                            borderRadius: '8px',
                            padding: '12px',
                            marginBottom: '8px'
                        }}>
                            <Flex justify="space-between" align="center">
                                <Flex align='center' gap={2}>
                                    <Text size={14} strong>{item.cardName}</Text>
                                    <Text size={12} style={{ color: '#666' }}>({item.cardNumber})</Text>
                                </Flex>
                                <Text size={12} style={{ color: '#e91e63' }}>{toCurrency(item.rechargeAmount)}{item.rechargeAmount ? ` + ${toCurrency(item.giftAmount)}` : ''}</Text>
                            </Flex>
                            <Flex justify='flex-end' >
                            {item.giftPoints > 0 && (
                                <Text size={10} style={{ color: '#52c41a' }}>
                                    赠送 {item.giftPoints} 积分
                                </Text>
                            )}
                            </Flex>
                            <Flex style={{ fontSize: 12, color: '#666' }}>
                                <Text size={12}>余额：{toCurrency(item.currentBalance)}</Text>
                            </Flex>
                            <div style={{
                                height: '4px',
                                backgroundColor: '#f0f0f0',
                                borderRadius: '2px',
                                overflow: 'hidden'
                            }}>
                                <div style={{
                                    width: `${(item.currentBalance / (item.rechargeAmount + item.giftAmount)) * 100}%`,
                                    height: '100%',
                                    backgroundColor: '#e91e63'
                                }} />
                            </div>
                            <Flex justify="space-between" style={{ fontSize: 12, color: '#666', marginTop: 8 }}>
                                <span>有效期：{item.validFrom} ~ {item.validTo}</span>
                                {isExpired(item.validTo) && (<span style={{ color: '#e91e63' }}>已过期</span>)}
                            </Flex>
                            {
                                item.remark && (
                                    <div style={{ marginTop: 2 }}>
                                        <Text size={12} strong style={{ color: '#666' }}>备注：</Text>
                                        <Text size={12} style={{ color: '#666' }}>{item.remark}</Text>
                                    </div>
                                )
                            }
                        </div>
                    )
                })
            }
        </>
    );
}


/** 计算是否过期 */
function isExpired(validTo: string) {
    const now = dayjs();
    const validToDate = dayjs(validTo + ' 23:00:00');
    return now.isAfter(validToDate);
}